<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket 测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .container {
            display: flex;
            gap: 20px;
        }
        .panel {
            flex: 1;
            border: 1px solid #ccc;
            padding: 15px;
            border-radius: 5px;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
        }
        .connected {
            background-color: #d4edda;
            color: #155724;
        }
        .disconnected {
            background-color: #f8d7da;
            color: #721c24;
        }
        .message-log {
            height: 300px;
            overflow-y: auto;
            border: 1px solid #ddd;
            padding: 10px;
            background-color: #f9f9f9;
            font-family: monospace;
            font-size: 12px;
        }
        input, button {
            margin: 5px;
            padding: 5px;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 3px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        button:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <h1>WebSocket 测试页面</h1>
    
    <div class="container">
        <div class="panel">
            <h2>WebSocket 客户端</h2>
            <div id="clientStatus" class="status disconnected">未连接</div>
            <button id="connectBtn" onclick="connect()">连接</button>
            <button id="disconnectBtn" onclick="disconnect()" disabled>断开</button>
            <br><br>
            <input type="text" id="messageInput" placeholder="输入消息内容" style="width: 200px;">
            <button onclick="sendMessage()">发送消息</button>
            <br><br>
            <h3>消息日志:</h3>
            <div id="clientMessageLog" class="message-log"></div>
        </div>
        
        <div class="panel">
            <h2>API 测试</h2>
            <button onclick="getStatus()">获取状态</button>
            <button onclick="getSessions()">获取会话</button>
            <button onclick="testBroadcast()">测试广播</button>
            <br><br>
            <h3>API 响应:</h3>
            <div id="apiResponse" class="message-log"></div>
        </div>
    </div>

    <script>
        let ws = null;
        let isConnected = false;

        function connect() {
            const wsUrl = `ws://${window.location.host}/websocket`;
            ws = new WebSocket(wsUrl);
            
            ws.onopen = function(event) {
                isConnected = true;
                updateClientStatus(true);
                logMessage('客户端', '连接成功');
            };
            
            ws.onmessage = function(event) {
                try {
                    const message = JSON.parse(event.data);
                    logMessage('服务器', JSON.stringify(message, null, 2));
                } catch (e) {
                    logMessage('服务器', event.data);
                }
            };
            
            ws.onclose = function(event) {
                isConnected = false;
                updateClientStatus(false);
                logMessage('客户端', '连接关闭');
            };
            
            ws.onerror = function(error) {
                logMessage('错误', 'WebSocket错误: ' + error);
            };
        }

        function disconnect() {
            if (ws) {
                ws.close();
                ws = null;
            }
        }

        function sendMessage() {
            if (!isConnected) {
                alert('请先连接WebSocket');
                return;
            }
            
            const content = document.getElementById('messageInput').value;
            if (!content) {
                alert('请输入消息内容');
                return;
            }
            
            const message = {
                type: 'ECHO',
                content: content,
                timestamp: Date.now()
            };
            
            ws.send(JSON.stringify(message));
            logMessage('客户端', '发送: ' + JSON.stringify(message));
            document.getElementById('messageInput').value = '';
        }

        function updateClientStatus(connected) {
            const statusDiv = document.getElementById('clientStatus');
            const connectBtn = document.getElementById('connectBtn');
            const disconnectBtn = document.getElementById('disconnectBtn');
            
            if (connected) {
                statusDiv.textContent = '已连接';
                statusDiv.className = 'status connected';
                connectBtn.disabled = true;
                disconnectBtn.disabled = false;
            } else {
                statusDiv.textContent = '未连接';
                statusDiv.className = 'status disconnected';
                connectBtn.disabled = false;
                disconnectBtn.disabled = true;
            }
        }

        function logMessage(sender, message) {
            const logDiv = document.getElementById('clientMessageLog');
            const timestamp = new Date().toLocaleTimeString();
            logDiv.innerHTML += `[${timestamp}] ${sender}: ${message}\n`;
            logDiv.scrollTop = logDiv.scrollHeight;
        }

        function logApiResponse(response) {
            const logDiv = document.getElementById('apiResponse');
            const timestamp = new Date().toLocaleTimeString();
            logDiv.innerHTML += `[${timestamp}] API: ${JSON.stringify(response, null, 2)}\n`;
            logDiv.scrollTop = logDiv.scrollHeight;
        }

        async function getStatus() {
            try {
                const response = await fetch('/api/websocket/status');
                const data = await response.json();
                logApiResponse(data);
            } catch (error) {
                logApiResponse({error: error.message});
            }
        }

        async function getSessions() {
            try {
                const response = await fetch('/api/websocket/sessions');
                const data = await response.json();
                logApiResponse(data);
            } catch (error) {
                logApiResponse({error: error.message});
            }
        }

        async function testBroadcast() {
            try {
                const message = {
                    type: 'BROADCAST',
                    content: '这是一条测试广播消息',
                    timestamp: Date.now()
                };
                
                const response = await fetch('/api/websocket/broadcast', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(message)
                });
                
                const data = await response.json();
                logApiResponse(data);
            } catch (error) {
                logApiResponse({error: error.message});
            }
        }

        // 页面加载时自动连接
        window.onload = function() {
            setTimeout(connect, 1000);
        };
    </script>
</body>
</html> 